<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现列表在单击时收缩和展开的效果。</title>
    <script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #select{
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
        }
        li{
            width:148px;
            height: 30px;
            border: 1px solid #000000;
            text-align: center;
        }
        #but_select{
            width:150px;
            height: 30px;
        }
        #div{
            width: 160px;
            background: #5bc0de;
        }
    </style>
    <script>
        //按钮单击弹出或收起下拉列表
        window.onload = function (){
            document.getElementById("but_select").onclick = function (){
                var selectElement = document.getElementById("select");
                if (selectElement.style.display == "none"){
                    selectElement.style.display = "block";
                }else{
                    selectElement.style.display = "none";
                }

            }

            //实现鼠标移开 自动收起下拉列表
            document.getElementById("div").onfocus = function (){
                alert(1);
                document.getElementById("select").style.display = "none";
            }

            //实现点击列表项 改变按钮值
            document.getElementById("li1").onclick = function (){
                document.getElementById("but_select").value = document.getElementById("li1").getAttribute("value");
                document.getElementById("select").style.display = "none";
            }
            document.getElementById("li2").onclick = function (){
                document.getElementById("but_select").value = document.getElementById("li2").getAttribute("value");
                document.getElementById("select").style.display = "none";
            }
            document.getElementById("li3").onclick = function (){
                document.getElementById("but_select").value = document.getElementById("li3").getAttribute("value");
                document.getElementById("select").style.display = "none";
            }
        }
    </script>
</head>
<body>
<div id="div" tabindex="1">
    <input type="button" value="这是一个下拉列表" id="but_select">
    <ul id="select">
        <li value="aaaaaa" id="li1" >aaaaaa</li>
        <li value="bbbbbb" id="li2">bbbbbb</li>
        <li value="cccccc" id="li3">cccccc</li>
    </ul>
</div>
</body>
</html>